import React, { useEffect, useState } from 'react';
import { Card, Row, Col, Statistic, Spin, message } from 'antd';
import { UserOutlined, TeamOutlined, DatabaseOutlined, RobotOutlined } from '@ant-design/icons';
import api from '../../services/api';

interface DashboardStats {
  total_users: number;
  total_teams: number;
  total_knowledge_bases: number;
  total_agents: number;
  total_documents: number;
  total_plugins: number;
}

const Dashboard: React.FC = () => {
  const [loading, setLoading] = useState(true);
  const [stats, setStats] = useState<DashboardStats>({
    total_users: 0,
    total_teams: 0,
    total_knowledge_bases: 0,
    total_agents: 0,
    total_documents: 0,
    total_plugins: 0,
  });

  useEffect(() => {
    fetchDashboardStats();
  }, []);

  const fetchDashboardStats = async () => {
    setLoading(true);
    try {
      const [usersRes, teamsRes, kbsRes, agentsRes] = await Promise.all([
        api.get('/users/', { params: { skip: 0, limit: 1 } }),
        api.get('/teams/', { params: { skip: 0, limit: 1 } }),
        api.get('/knowledge-bases/', { params: { skip: 0, limit: 1 } }),
        api.get('/agents/', { params: { skip: 0, limit: 1 } }),
      ]);

      setStats({
        total_users: usersRes.data.total,
        total_teams: teamsRes.data.total,
        total_knowledge_bases: kbsRes.data.total,
        total_agents: agentsRes.data.total,
        total_documents: 0,
        total_plugins: 0,
      });
    } catch (error: any) {
      message.error('Failed to fetch dashboard statistics');
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return (
      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '400px' }}>
        <Spin size="large" />
      </div>
    );
  }

  return (
    <div>
      <h1>Dashboard</h1>
      <Row gutter={[16, 16]}>
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="Total Users"
              value={stats.total_users}
              prefix={<UserOutlined />}
              valueStyle={{ color: '#3f8600' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="Total Teams"
              value={stats.total_teams}
              prefix={<TeamOutlined />}
              valueStyle={{ color: '#1890ff' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="Knowledge Bases"
              value={stats.total_knowledge_bases}
              prefix={<DatabaseOutlined />}
              valueStyle={{ color: '#cf1322' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="Agents"
              value={stats.total_agents}
              prefix={<RobotOutlined />}
              valueStyle={{ color: '#722ed1' }}
            />
          </Card>
        </Col>
      </Row>

      <Card style={{ marginTop: 24 }} title="Quick Actions">
        <p>Welcome to the AI Platform Admin Dashboard!</p>
        <p>Use the navigation menu on the left to manage your platform resources.</p>
      </Card>
    </div>
  );
};

export default Dashboard;
